<template>
    <el-card class="box-card">
        <!--<div slot="header" class="clearfix" height="30px">-->
            <!--<span>过程线</span>-->
        <!--</div>-->
        <ve-line ref="vref"
                height="330px"
                :set-option-opts="false"
                :data="chartData"
                :data-zoom="chartDataZoom"
                 :y-axis="yaxis"
                 :legend="legend"
                 :events="chartEvents"
                 :toolbox="toolbox">
        </ve-line>
        <!--<button @click="change">change</button>-->
        <div>
        </div>
    </el-card>
</template>

<script>
    //import { LINE_DATA } from './data'
    import VeLine from 'v-charts/lib/line.common'
    export default {
        components: { VeLine },
        props:["profileId"],
        data () {
            var self = this;
            this.chartEvents = {
                mouseover: function (e) {
                    self.name = e.data;
                    var tdata =self.chartData.rows[e.dataIndex];
                    var iindex = 0;
                    var tardata = new Array(self.chartData.rows.length-1);
                    for(var item in tdata)
                    {
                        if(iindex > 0)
                        {
                            //console.log(tdata[item]);
                            tardata[iindex-1] = tdata[item];
                        }
                        iindex++;
                    }
                    self.$emit('sendprofiledata',tardata);
                }
            };
            return {
                name:"",
                yaxis: {
                    min: '190',
                    axisLabel:{formatter:'{value} m'},
                    type: 'value',
                    axisLine: {
                        show: true,
                    },
                    lineStyle: {
                        color: '#808080',
                        width: 10
                    }
                },
                title: {

                    text: "监测断面过程线", //正标题

                    x: "center", //标题水平方向位置
                    //正标题样式
                    textStyle: {
                        fontSize: 20
                    }
                },
                legend: {
                    x: "center"
                },
                toolbox: {
                    show : true,
                    x: "left",
                    feature : {
                        saveAsImage: {show: true}
                    }
                },
                chartData:{
                columns: ['date', '桩1-1', '桩1-2', '桩1-3'],
                rows: [
                    { 'date': '01/01', '桩1-1': 15, '桩1-2': 12 },
                    { 'date': '01/02', '桩1-1': 12, '桩1-2': 25 },
                    { 'date': '01/03',  '桩1-2': 10 },
                    { 'date': '01/04', '桩1-1': 41, '桩1-2': 32 },
                    { 'date': '01/05', '桩1-1': 31, '桩1-2': 30 },
                    { 'date': '01/06', '桩1-1': 71, '桩1-2': 55 }
                ]
            },
                chartDataZoom: [
                {
                    type: 'slider',
                    start: 0,
                    end: 20
                }
            ]
            }
        },
        mounted(){
            //profileAllList
            this.profileModel.profileAllList('7').then(res =>{
                var index = 0;
                for(var item in res[0])
                {
                    this.chartData.columns[index] = item;
                    index++;
                }
                this.chartData.rows = res;
            }).catch(err => {
                console.log(err.message)
            });
            //this.profileId = "164";
        },
        watch: {
            profileId: {
                handler(newdata, olddata) {
                    this.profileModel.profileAllList(newdata.toString()).then(res =>{
                        var index = 0;
                        for(var item in res[0])
                        {
                            this.chartData.columns[index] = item;
                            index++;
                        }
                        this.chartData.rows = res;
                    }).catch(err => {
                        console.log(err.message)
                    });
                },
            }
        },
        methods: {
            change () {
                this.chartData.rows.push({
                    '日期': '1/1',
                    '桩1-1': Math.random() * 1000,
                    '桩1-2': Math.random() * 1000
                })
            }
        }
    }
</script>
<style>
    .text {
        font-size: 14px;
    }
    .box-card {
        width: 100%;
        /*height: 380px;*/
    }
</style>
